<template>
    <div>
     	<div class="header1" style="text-align: center;font-weight: 700;">
     								<p>活动信息</p>
     								
     								<el-button v-if="!isModifyAct" type="success" style="font-size: 15px;margin-bottom: 20px;" size="medium" class="el-icon-circle-plus"  @click="create()">新建</el-button>											   
     								
     								
     								<!-- <el-divider content-position="right"></el-divider> -->
     							</div>
     	<div class="content1" style="margin-top: 0;" v-loading="loading">
     								<el-row v-if="isModifyAct" type="flex" justify="center"  align="middle" style="margin-top:3.125rem;" v-loading="loading">
     									<el-col :span="16">
     										<el-card style="background-color: #FFFFFF">
     											<el-row>
     												<el-col :span="22">
     													<el-form :model="activityModifyForm" ref="activityModifyForm" :rules="actRules"  label-position="left" style="font-weight: 700;">
     														<el-form-item prop="title" label="活动名称" style="margin-top: 0.625rem;">
     															<!-- <div > -->
     															<el-input v-model="activityModifyForm.title" class = "modifyInPut"></el-input>
     															<!-- </div> -->
     														</el-form-item>
     														<el-form-item prop="showTime" label="公布时间">
     															<!-- <div > -->
     															<!-- <el-input v-model="activityModifyForm.activeTime"  class = "modifyInPut"></el-input> -->
     															<!-- </div> -->
     															<el-date-picker
     															      v-model="activityModifyForm.showTime"
     															      type="datetime"
     															      placeholder="选择日期时间"
     																  class = "modifyInPut"
																	   value-format="yyyy-MM-dd HH:mm">
     															    </el-date-picker>
     														</el-form-item>
     														<el-form-item prop="activeTime" label="活动时间">
     															<!-- <div > -->
     															<!-- <el-input v-model="activityModifyForm.activeTime"  class = "modifyInPut"></el-input> -->
     															<!-- </div> -->
     															<el-date-picker
     															      v-model="activityModifyForm.activeTime"
     															      type="datetime"
     															      placeholder="选择日期时间"
     																  class = "modifyInPut"
																	  value-format="yyyy-MM-dd HH:mm">
     															    </el-date-picker>
     														</el-form-item>
     														
     														<el-form-item prop="typeCode" label="活动类型">
     															<br>
     															<el-radio-group v-model="activityModifyForm.typeCode" class = "modifyInPut" style="width: 80%;">
     																  <el-radio :label="1"  >近期计划</el-radio>
     																  <el-radio :label="2" >娱乐活动</el-radio>
     																  <el-radio :label="3"  >竞赛信息</el-radio>
     																  <el-radio :label="0" >其他活动</el-radio>
     															</el-radio-group>
     															<!-- </div> -->
     														</el-form-item>
     														
     														<el-form-item prop="content" label="活动简介">
     															<!-- <div > -->
																<br>
																<editor
																	moduleTitle="编辑简介"
																	:content="activityModifyForm.content"
																	:downloadApi="this.$api.picTemplate"
																	:uploadApi="this.$api.uploadPicActivity"
																	@do-submit="submit"
																	@editor-change="textChange"
																	@do-picture="addPicture"
																	></editor>
     															<br>
																<input  style="height: 0px;border: 0;margin: 0;"   v-model="activityModifyForm.content" ></input>
																</el-form-item>
															<!-- <el-form-item prop="detail" label="项目简介"> -->
															<!-- </el-form-item> -->
															</el-form-item>
     														<el-form-item prop="peopleG" label="针对人群">
     															<!-- <div > -->
																
     															<br>
     															<el-radio-group v-model="activityModifyForm.peopleG" class = "modifyInPut" style="width: 80%;">
     																  <el-radio :label="0">全部</el-radio>
     																  <el-radio :label="1">大一</el-radio>
     																  <el-radio :label="2">大二</el-radio>
     																  <el-radio :label="3">大三</el-radio>
     																  <el-radio :label="4">大四</el-radio>
     																  <el-radio :label="5">研究生</el-radio>
     															</el-radio-group>
     															<br>
     															<el-radio-group v-model="activityModifyForm.peopleM" class = "modifyInPut">
     																  <el-radio :label="0">全部</el-radio>
     																  <el-radio :label="1">软件</el-radio>
     																  <el-radio :label="2">硬件</el-radio>
     															</el-radio-group>
     															<el-checkbox v-model="activityModifyForm.isPublic">对所有人公开</el-checkbox>
     														</el-form-item>
     														<el-form-item prop="time" label="发布人" v-if="!isCreateAct">
     															<!-- <div > -->
     															<span  style="margin-left: 8%;  margin-right: 20%;width: 60%;">{{activityModifyForm.user}}</span>
     															<!-- </div> -->
     														</el-form-item>
     														
     														<el-form-item style="text-align: center;">
     															<el-button  style="width: 20%;" @click="isModifyAct = false;isCreateAct = false">取消</el-button>
     															<el-button v-if="!isCreateAct" style="width: 20%;" type="success" @click="modifyAct('activityModifyForm')">保存</el-button>
     															<el-button v-else style="width: 20%;" type="success" @click="createAct('activityModifyForm')">保存</el-button>
     														</el-form-item>
     													</el-form>
     												</el-col>
     												<el-col :span="1" v-if="!isCreateAct">
     													<el-button icon="el-icon-delete" type="danger" @click="deleteAct"></el-button>
     												</el-col>
     											</el-row>
     										</el-card>
     									</el-col>
     								</el-row >
     								<el-table v-else :data="activityForm" style="width: 100%" stripe  border  :default-sort = "{prop: 'activeTime',order:'descending'}">
     									<el-table-column
     									  prop="id"
     									  label="ID"
										  sortable
     									  width="60px">
     									</el-table-column>
     									 <el-table-column
     									   prop="title"
										   width="80px"
     									   label="标题"
										   sortable>
     									 </el-table-column>
										 <el-table-column
										   prop="type"
										   label="类型"
										   sortable>
										 </el-table-column>
     									<el-table-column
     									  prop="content"
     									  label="内容"
     									  width="350px">
										   <template slot-scope="scope">
										          <div v-html='scope.row.content'></div>
										      </template>
     									</el-table-column>
										<!-- <el-table-column
										  prop=""
										  label="图片"
										  width="160px">
										  <el-image slot-scope="scope" :src="scope.row.picture"></el-image>
										</el-table-column> -->
     									
     									<el-table-column
     									  prop="people"
     									  label="针对人员">
										  <template slot-scope="scope">
										         <div v-html='scope.row.people'></div>
										     </template>
     									  </el-table-column>
     									 <el-table-column
     									   prop="activeTime"
     									   label="活动时间"
										   sortable
										   width="140px">
     									 </el-table-column>
     									 <el-table-column
     									   prop="showTime"
     									   label="展示时间"
										   sortable
										   width="140px">
     									 </el-table-column>
     									 <el-table-column
     									   prop="createTime"
     									   label="创建时间"
										   sortable
										   width="140px">
     									 </el-table-column>
     									</el-table-column>
     									 <el-table-column
     									   prop="user"
										   sortable
     									   label="创建者">
     									 </el-table-column>
     								 
     									 <el-table-column fixed="right" label="操作" width="50">
     									   <template slot-scope="scope">
     										   <el-tooltip content="管理" placement="top" style="">
     												<el-button type="warning" class="el-icon-s-tools" size="mini" @click="editAct(scope.row)" circle></el-button>	
     											</el-tooltip>
     									   </template>
     									</el-table-column>
     								</el-table>
     								<el-row  v-if="!isModifyAct" class="">
     									<el-col :span="24" style="text-align: center;">
     										<div style="margin-top:2%;margin-bottom: 2%;;">
     										<el-pagination
     											@current-change="getActivity"
     											background
     											page-size="10"
     											layout="prev, pager,next "
     											:total="total">
     										</el-pagination>
     										</div>
     									</el-col>
     								 </el-row>		
     	</div>
    </div>
</template>

<script>
	
	import cutImageDialog  from './cut.vue' 
	import editor  from '../components/editor.vue' 
export default {
	components: {
	  cutImageDialog,
	  editor
	},
    props:{
    	 proForm:{
    	        type:Object 
    	    },
    },
   
    data:function () {
		
        
		return{
			contentPicture:[],
			activityForm:[],
			activityModifyForm:[],
			isModifyAct:false,
			isCreateAct:false,
			actRules:{
				title: [
						{ required: true, message: '请输入活动名称', trigger: 'blur' },
						{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
					],
				content: [
						{ required: true, message: '请输入活动简介', trigger: 'blur' }
					],
				showTime: [
						{ required: true, message: '请选择公布时间', trigger: 'blur' }
					],
				activeTime: [
						{ required: true, message: '请选择活动时间', trigger: 'blur' }
					],
				typeCode: [
						{ required: true, message: '请选择活动类型', trigger: 'blur' }
					],
				peopleG: [
						{ required: true, message: '请选择活动人群', trigger: 'blur' }
					]
			},
			
			
			total:10,
			loading:false,
		}
	},
    
    
    methods:{
		
		addPicture(val){
			this.contentPicture.push(val)
		},
		textChange(val){
			this.activityModifyForm.content = val
			
		},
		submit:function(val){
			// let content = val.editor_content;
			// const regex = new RegExp('<img', 'gi')
			// this.activityModifyForm.content = content.replace(regex, `<img style="max-width: 70%; height: auto"`)
			this.activityModifyForm.content = val.editor_content
			
			this.$message({
				message: '成功，保存后查看',
				type: 'success'
				});
				
		},
		finish:function(){
			this.$message({
				message: '成功，保存后查看',
				type: 'success'
				});
		},
           create:function(){
			this.contentPicture.length = 0
			this.contentPicture.length = 0
           	this.isCreateAct = true;
           	this.isModifyAct = true;
           	this.activityModifyForm={
           		"id": "",
           		"content": "",
           		"user": "",
           		"title": "",
           		typeCode:0,
           		"picture": "",
           		"createTime":"",
           		"activeTime": "",
           		"showTime": "",
           		peopleM:0,
           		peopleG:0,
				isPublic:1
           	}
           },
           createAct:function(formName){
           	if(this.activityModifyForm.activeTime < this.activityModifyForm.showTime){
           		this.$message.error('活动时间不能早于展示时间');
           	}else{
           		this.$refs[formName].validate( (valid) => {
           			  if (valid) {
           				  this.$confirm('确认保存？', '确认信息', {
           				  	distinguishCancelAndClose: true,
           				  	confirmButtonText: '确认',
           				  	cancelButtonText: '取消'
           				  }).then(async () => {
           					  this.loading = true;
           					  
           						let postData = {
           							"id":this.activityModifyForm.id,
           							"title":this.activityModifyForm.title,
           							"content":this.activityModifyForm.content,
           							"activeTime":this.activityModifyForm.activeTime,
           							"showTime":this.activityModifyForm.showTime,
           							"type":this.activityModifyForm.typeCode,
           							people:this.activityModifyForm.peopleG +""+this.activityModifyForm.peopleM,
									picture:this.contentPicture,
									isPublic : this.activityModifyForm.isPublic
           						}
           						console.log(postData)
           						let res = await this.text(this.$api.releaseActivity,postData,"post")
           						
           						
           						if (res.code === 200) {
           							this.$message({
           								message: '创建成功',
           								type: 'success'
           								});
           						this.isModifyAct = false
								
           						location.reload();
           						}else{
           								this.$message.error('请求失败或者接口返回失败');
           						}
           						this.loading = false;
           					})
           			  } else {
           				this.$message.error('请输入数据');
           				return false;
           			  }
           		})
           	}
           },
           deleteAct:function(){
           	this.$confirm('确认删除？', '确认信息', {
           		distinguishCancelAndClose: true,
           		confirmButtonText: '确认',
           		cancelButtonText: '取消'
           	}).then(async () => {
           		this.loading = true;
           		let res = await this.text(this.$api.deleteActivity+"?id="+this.activityModifyForm.id)
           		// let res =""
           		
           		if (res.code === 200) {
           			this.$message({
           				message: '删除成功',
           				type: 'success'
           				});
           			this.isModifyAct = false
           			location.reload();
           		}else{
           				this.$message.error('请求失败或者接口返回失败');
           		} 
           		this.loading = false;
           	});
           },
           modifyAct:function(formName){
           	if(this.activityModifyForm.activeTime < this.activityModifyForm.showTime){
           		this.$message.error('活动时间不能早于展示时间');
           	}else{
           		this.$refs[formName].validate( (valid) => {
           			  if (valid) {
           				  this.$confirm('确认保存？', '确认信息', {
           				  	distinguishCancelAndClose: true,
           				  	confirmButtonText: '确认',
           				  	cancelButtonText: '取消'
           				  }).then(async () => {
           					  this.loading = true;
           					  
           						let postData = {
           							"id":this.activityModifyForm.id,
           							"title":this.activityModifyForm.title,
           							"content":this.activityModifyForm.content,
           							"activeTime":this.activityModifyForm.activeTime,
           							"showTime":this.activityModifyForm.showTime,
           							"type":this.activityModifyForm.typeCode,
           							people:this.activityModifyForm.peopleM +""+this.activityModifyForm.peopleG,
									picture:this.contentPicture,
									isPublic:this.activityModifyForm.isPublic
           						}
           						console.log(postData)
           						let res = await this.text(this.$api.modifyActivity,postData,"post")
           						
           						
           						if (res.code === 200) {
           							this.$message({
           								message: '修改成功',
           								type: 'success'
           								});
           						this.isModifyAct = false
           						location.reload();
           						}else{
           								this.$message.error('请求失败或者接口返回失败');
           						}
           						this.loading = false;
           					})
           			  } else {
           				this.$message.error('请输入数据');
           				return false;
           			  }
           		})
           	}
           	// this.isModifyAct = false
           },
           editAct:function(n){
           	this.isModifyAct = true
           	this.activityModifyForm = {
           		"id": n.id,
           		"content": n.content,
           		"user": n.user,
           		"title": n.title,
           		typeCode:n.typeCode,
           		"picture": n.picture,
           		"createTime":n.createTime,
           		"activeTime": n.activeTime,
           		"showTime": n.showTime,
           		peopleM:Number(n.peopleCode.substring(0,1)),
           		peopleG:Number(n.peopleCode.substring(1,2)),
				picture:n.picture,
				isPublic:n.isPublic
           	}
           	
           },
           getActivity: async function(n){
           	this.loading = true
           	let type = 0
           	let res = await this.text(this.$api.getNumActivity+"?type="+ type)
           		
           		if (res.code === 200) {
           			this.total = res.data.num
           			
           		}else{
           			this.$message.error('请求失败或者接口返回失败');
           		}
           	this.activityForm.length = 0
           	this.activityForm.push()
           	
           	let b = (n-1) * 10
           	let e = n * 10
           	res = await this.text(this.$api.showManyActivity+"?page="+b+"&num="+e+"&type="+type)
           	
           	if (res.code === 200) {
           		res.data.forEach(e =>{
           			let type = "其他活动"
           			if(e.type === 1){
           				type = "近期计划"
           			}else if(e.type === 2){
           				type = "娱乐活动"
           			}else if(e.type === 3){
           				type = "竞赛信息"
           			}
           			let x =	e.people.substring(0,1)
           			let y =	e.people.substring(1,2)
           			let people = this.$GLOBAL.people[x][y]
					if(e.isPublic){
						people ="•" + people + "<br><br><br>•对外公开"
					}else{
						people ="•" + people + "<br><br><br>•对内公开"
					}
           			this.activityForm.push(
           			{
           				"id": e.id,
           				"content": e.content,
           				"user": e.user.name,
           				"title": e.title,
           				"type": type,
           				typeCode:e.type,
           				"picture": e.picture,
           				"createTime":this.$dateFormat(e.createTime),
           				"activeTime": this.$dateFormat(e.activeTime),
           				"showTime": this.$dateFormat(e.showTime),
           				"peopleCode":e.people,
           				"people":people,
						picture: this.$api.picTemplate+e.picture,
						isPublic:e.isPublic
           			})
           		})
           		
           	}else{
           			this.$message.error('请求失败或者接口返回失败');
           	} 
           	this.loading = false;
           },
           
    },
	created() {
		if(!this.$GLOBAL.isAdmin){
			this.$router.push("login")
			this.$message.error('用户权限不足');
		}else{
			
			this.getActivity(1)
		}
		
	}
}
</script>

<style scoped>
  @import url("../assets/style/admin.css");
</style>